<template>
  <div class="order-game">
    <div class="og-head">
  <div class="og-tip">点击“上移/下移”调整卡片顺序，直至与正确顺序一致。</div>
      <div class="og-stats">
        <el-tag size="small">交换次数：{{ swapCount }}</el-tag>
      </div>
    </div>
    <ul class="og-list">
      <li v-for="(item, idx) in current" :key="item" class="og-item">
        <span class="idx">{{ idx+1 }}.</span>
        <span class="text">{{ item }}</span>
        <span class="ops">
          <el-button size="small" text @click="moveUp(idx)" :disabled="idx===0">上移</el-button>
          <el-button size="small" text @click="moveDown(idx)" :disabled="idx===current.length-1">下移</el-button>
        </span>
      </li>
    </ul>
    <div class="og-actions">
      <el-button size="small" @click="reset()">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'

const props = defineProps({ quest: { type: Object, required: true } })
const emit = defineEmits(['progress', 'canFinishChanged'])

const sequence = computed(() => Array.isArray(props.quest?.requirement_json?.sequence) ? props.quest.requirement_json.sequence.map(String) : [])
const initial = computed(() => Array.isArray(props.quest?.requirement_json?.initial) ? props.quest.requirement_json.initial.map(String) : null)

const current = ref([])
const swapCount = ref(0)

function reset(){
  current.value = initial.value ? [...initial.value] : shuffle([...sequence.value])
  swapCount.value = 0
  report()
}

function shuffle(a){ const b=[...a]; for(let i=b.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [b[i],b[j]]=[b[j],b[i]] } return b }

function moveUp(i){ if(i<=0) return; [current.value[i-1], current.value[i]] = [current.value[i], current.value[i-1]]; swapCount.value += 1; report() }
function moveDown(i){ if(i>=current.value.length-1) return; [current.value[i+1], current.value[i]] = [current.value[i], current.value[i+1]]; swapCount.value += 1; report() }

function isCorrect(){
  if(current.value.length !== sequence.value.length) return false
  for(let i=0;i<sequence.value.length;i++){ if(String(current.value[i]) !== String(sequence.value[i])) return false }
  return true
}

function report(){
  const payload = { current_order: [...current.value], swap_count: swapCount.value }
  emit('progress', payload)
  emit('canFinishChanged', isCorrect())
}

onMounted(() => { reset() })
watch(() => props.quest?.id, () => { reset() })
</script>

<style scoped>
.order-game { display:block; }
.og-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.og-tip { color:#666; font-size:12px; }
.og-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.og-item { display:flex; align-items:center; gap:10px; background:#f6f8fa; border-radius:10px; padding:10px; }
.og-item .idx { width:22px; text-align:right; color:#666; }
.og-item .text { flex:1; font-weight:600; }
.ops { display:flex; gap:4px; }
.og-actions { margin-top:8px; }
</style>
